﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Services ++</title>
    <link href="css/theme-triton-all_1.css" rel="stylesheet"/>
    <link href="css/theme-triton-all_2.css" rel="stylesheet" />
    <link href="css/splus.css" rel="stylesheet" />
</head>
<body>
    <div id="helloWorldPanel"></div>
    <script type="text/javascript" src="js/ext-all.js"></script>
    <script type="text/javascript">

        //Service Control
        function startService(serviceName) {
            alert(serviceName);
            return false;
        }
        //End of Service Control


        Ext.require([
            'Ext.grid.*',
            'Ext.data.*',
            'Ext.grid.filters.Filters'
        ]);

        //Ext.onReady(function () {
        //    var jStore = new Ext.data.JsonStore({
        //        storeId: 'jStore',
        //        proxy: {
        //            type:'ajax',
        //            url: '/api/service',
        //            reader: {
        //                type: 'json'
        //            }
        //        },
        //        fields: ['DisplayName', 'State', 'StartModeView']
        //    });

        //    jStore.load();

        //    var grid = Ext.create('Ext.grid.GridPanel', {
        //        store: jStore,
        //        columns: [
        //            { header: "Name", flex:1, dataIndex: 'DisplayName', sortable: true },
        //            { header: "Status", width: 200, dataIndex: 'State', sortable: true },
        //            { header: "Startup Type", width: 200, dataIndex: 'StartModeView', sortable: true }
        //           ],
        //        title: 'S',
        //        tbar: [{ xtype: 'button', text: 'OK' }, { xtype: 'button', text: 'Cancel' }]
        //    });
        //});


        //Ext.create('Ext.panel.Panel', {
        //    renderTo: Ext.getBody(),
        //    width: 400,
        //    height: 300,
        //    title: 'Container Panel',
        //    items: [
        //        {
        //            xtype: 'panel',
        //            title: 'Child Panel 1',
        //            height: 100,
        //            width: '75%'
        //        },
        //        {
        //            xtype: 'panel',
        //            title: 'Child Panel 2',
        //            height: 100,
        //            width: '75%'
        //        }
        //    ]
        //});

        var mainGrid;
        var grdContext;
        var jStore;

        Ext.onReady(function () {
            grdContext = new Ext.menu.Menu({
                items: [{
                    id: 'start',
                    text: 'Start'
                }, {
                    id: 'stop',
                    text: 'Stop'
                }, {
                    id: 'pause',
                    text: 'Pause'
                }, {
                    id: 'resume',
                    text: 'Resume'
                }, {
                    id: 'restart',
                    text: 'Restart'
                }, {
                    xtype: 'menuseparator'
                }, {
                    id: 'edit',
                    text: 'Edit'
                }, {
                    id: 'delete',
                    text: 'Delete'
                }, {
                    xtype: 'menuseparator'
                }, {
                    id: 'refresh',
                    text: 'Refresh'
                }, {
                    id: 'properties',
                    text: 'Properties'
                }],
                listeners: {
                    click: function () {
                        var itemId = arguments[1].id;
                        var data = getSelectedData();
                        switch (itemId) {
                            case 'start':
                                startService(data.ServiceName);
                                break;
                            case 'stop':
                                stopService(data.ServiceName);
                                break;
                            case 'pause':
                                pauseService(data.ServiceName);
                                break;
                            case 'resume':
                                resumeService(data.ServiceName);
                                break;
                            case 'restart':
                                restartService(data.ServiceName);
                                break;
                            case 'properties':
                                showProperties();
                                break;
                            default:

                        }
                        //propertyWindow();
                      }
                }
            });
                jStore = new Ext.data.JsonStore({
                    storeId: 'jStore',
                    proxy: {
                        type:'ajax',
                        url: '/api/service',
                        reader: {
                            type: 'json'
                        }
                    },
                    fields: ['ServiceName','DisplayName','DisplayNameDepend','Description','PathName','AcceptPause', 'AcceptStop','DesktopInteract','ErrorControl','IsSystem','ProcessId','ServiceType','Started','Status','StartName','State','StateView','SystemName','StartMode','StartModeView','StartNameView','DescriptionView']
                });

                jStore.load();

                 mainGrid = Ext.create('Ext.grid.GridPanel', {
                    store: jStore,
                    columns: [
                        { header: "Name", flex: 1, dataIndex: 'DisplayName', sortable: true, filter: { type: 'string', itemDefaults: { emptyText: 'Search for...' } } },
                        { header: "Status", width: 100, dataIndex: 'StateView', sortable: true },
                        { header: "Startup Type", width: 110, dataIndex: 'StartModeView', sortable: true },
                        { header: "Type", width: 120, dataIndex: 'ServiceType', sortable: true },
                        { header: "Log On", width: 150, dataIndex: 'StartNameView', sortable: true },
                        { header: "Description", flex: 1, dataIndex: 'DescriptionView', sortable: true }
                       ],
                    title: 'S',
                    region: 'center', // this is what makes this panel into a region within the containing layout
                    layout: 'card',
                    margins: '2 5 5 0',
                    activeItem: 0,
                    border: false,
                    tbar: [{ xtype: 'button', text: 'OK' }, { xtype: 'button', text: 'Cancel' }],
                    selModel: {
                        selType: 'rowmodel',
                        mode: 'SINGLE',
                        listeners: {
                            selectionchange: function () {
                                if (arguments[1][0]) {
                                var data = arguments[1][0].data;
                                data = dataServiceControlChanger(data);
                                detailsPanel.update(data);
                                //update context menu
                                for (i = 0; i <= 10; i++) {
                                    grdContext.items.items[i].enable(true);
                                }
                                if (data.StartMode === 'Disabled') {
                                    grdContext.items.items[0].disable(true); //Start
                                    grdContext.items.items[1].disable(true);
                                    grdContext.items.items[2].disable(true);
                                    grdContext.items.items[3].disable(true);
                                    grdContext.items.items[4].disable(true);
                                    return;
                                }
                                //Start

                                }//End of if arguments[1][0].data
                            }
                        }
                    },
                    listeners: {
                        rowclick: function () {
                            //var data = arguments[1].data;
                            //data = dataServiceControlChanger(data);
                            //detailsPanel.update(data);
                        },
                        rowcontextmenu: function () {
                            var e = arguments[4].event;
                            e.stopPropagation();
                            e.cancelBubble = true;
                            e.preventDefault();
                            grdContext.showAt(e.clientX, e.clientY);
                        }
                    },
                    viewConfig: {
                        getRowClass: function (record, rowIndex, rowParams, store) {
                            if (record.data.StartMode === 'Disabled') { return 'rowGray'; }
                            if (record.data.State === 'Stopped') { return 'rowRed'; }
                            if (record.data.State === 'Paused') { return 'rowPause'; }
                            return 'rowRun';
                        }
                    }
                });

                var detailsPanel = new Ext.panel.Panel({
                    id: 'details-panel',
                    region: 'center',
                    tpl: [
                        '<div class="svc-details"><h4>{DisplayName}</h4>',
                        '<div>',
                        '<div><a{StartLink}>{StartText}</a> the service</div>',
                        '<div><a{PauseLink}>{PauseText}</a> the service</div>',
                        '<div><a{RestartLink}>Restart</a> the service</div>',
                        '</div>',
                        '<p class="svc-header">Path to executable:</p>',
                        '<p>{PathName}</p>',
                        '<p class="svc-header">Description:</p>',
                        '<p>{Description}</p></div>'
                    ],
                    html: '<p><i>Select a service</i></p>'
                });

                var footerPanel = new Ext.panel.Panel({
                    title: 'System',
                    id: 'footer-panel',
                    region: 'south',
                    height: 200,
                    tpl: [
                        '<div><b>{MachineName}</b></div>',
                        '<div><b>{OsName}</b></div>',
                        '<div>Install date: <b>{InstallDate}</b></div>',
                        '<div>Last bootup: <b>{LastBootupTime}</b></div>',
                        '<div><b>{Cpu} - {Architecture}</b></div>',
                        '<div><b>{TotalMemory} GB RAM</b></div>'
                    ],
                    html: 'Loading ...'
                });

            // Finally, build the main layout once all the pieces are ready.  This is also a good
            // example of putting together a full-screen BorderLayout within a Viewport.
            Ext.create('Ext.Viewport', {
                layout: 'border',
                title: 's',
                items: [{
                    xtype: 'box',
                    id: 'header',
                    region: 'north',
                    html: 'ss',
                    height: 30
                }, {
                    title:'Details',
                    layout: 'border',
                    id: 'layout-browser',
                    region: 'west',
                    border: false,
                    split: true,
                    collapsible: true,
                    margins: '2 0 5 5',
                    width: 200,
                    minSize: 100,
                    maxSize: 500,
                    items: [detailsPanel, footerPanel]
                },
                    mainGrid
                ],
                renderTo: Ext.getBody()
            });

            Ext.Ajax.request({
                url: '/api/system',
                success: function (response) {
                    var data = Ext.util.JSON.decode(response.responseText);
                    footerPanel.update(data);
                }
            });

        }); //End of onReady

        //Add extra property to data in order to control the Start, Pause and Restart hyperlink
        function dataServiceControlChanger(data) {
            if (data.StartMode === 'Disabled') {
                data.StartLink = '';
                data.PauseLink = '';
                data.RestartLink = '';
                data.StartText = 'Start';
                data.PauseText = 'Pause';
                return data;
            }
            if (data.State === 'Running') {
                data.StartLink = ' href="#" onclick="return stopService(\'' + data.ServiceName + '\');"';
                data.StartText = 'Stop';

                data.PauseLink = '';
                if (data.AcceptPause === true) {
                    data.PauseLink = ' href="#" onclick="return pauseService(\'' + data.ServiceName + '\');"';
                }
                data.RestartLink = ' href="#" onclick="return restartService(\'' + data.ServiceName + '\');"';

                data.PauseText = 'Pause';
                return data;
            }
            if (data.State === 'Stopped') {
                data.StartLink = ' href="#" onclick="return startService(\'' + data.ServiceName + '\');"';
                data.StartText = 'Start';

                data.PauseLink = '';
                data.RestartLink = '';
                data.PauseText = 'Pause';
                return data;
            }

            if (data.State === 'Paused') {
                data.StartLink = ' href="#" onclick="return stopService(\'' + data.ServiceName + '\');"';
                data.StartText = 'Stop';

                data.PauseLink = ' href="#" onclick="return resumeService(\'' + data.ServiceName + '\');"';
                
                data.RestartLink = ' href="#" onclick="return restartService(\'' + data.ServiceName + '\');"';

                data.PauseText = 'Resume';
                return data;
            }
        }

        function showProperties() {
            var win = Ext.create('widget.window', {
                title: 'Properties',
                closable: true,
                closeAction: 'destroy',
                maximizable: false,
                modal:true,
                width: 500,
                height: 600,
                layout: {
                    type:'border',
                    padding:5
                },
                items: [{
                    region: 'center',
                    xtype: 'tabpanel',
                    items: [{
                        title: 'T01',
                        items: [
                            {
                                xtype: 'form',
                                title: '',
                                frame: false,
                                header: false,
                                bodyPadding: 5,
                                border:0,
                                id: 'property-general-form',
                                defaults:{
                                    anchor: "100%",
                                    readOnly:true,
                                    fieldStyle: {
                                        cursor: 'default'
                                    }
                                },
                                items: [
                                    {
                                        xtype: 'textfield',
                                        name: 'ServiceName',
                                        id:'ServiceName',
                                        fieldLabel: 'SN'
                                    }, {
                                        xtype: 'textfield',
                                        name: 'DisplayName',
                                        fieldLabel: 'DN'
                                    }, {
                                        xtype: 'textarea',
                                        name: 'Description',
                                        fieldLabel: 'D'
                                    }, {
                                        xtype: 'textfield',
                                        name: 'PathName',
                                        fieldLabel: 'Pa'
                                    }, {
                                        xtype: 'textfield',
                                        name: 'StartModeView',
                                        fieldLabel: 'SM'
                                    }, {
                                        xtype: 'textfield',
                                        name: 'State',
                                        fieldLabel: 'SS'
                                    }, {
                                        xtype: 'textfield',
                                        name: 'StartNameView',
                                        fieldLabel: 'LO'
                                    }
                                ],
                                buttons: [
                                    {
                                        text:'Start'
                                    }, {
                                        text: 'Stop',
                                        disabled: true
                                    }, {
                                        text: 'Pause'
                                    }, {
                                        text: 'Resume'
                                    }, {
                                        text: 'Restart'
                                    }

                                ]
                            }
                        ]
                    }, {
                        title:'T02'
                    }]
                }
                ],
                bbar: [{
                    xtype: 'button',
                    text: 'Button 1'
                }
                ]
            });
            
            var serviceName = getSelectedData().ServiceName;
            var generalForm = Ext.getCmp('property-general-form').getForm();


            Ext.getBody().mask('Loading Properties ...');
            Ext.Ajax.request({
                url: '/api/service/' + serviceName,
                success: function (response) {
                    var data = Ext.util.JSON.decode(response.responseText);
                    Ext.getBody().unmask();
                    generalForm.setValues(data);
                    win.show();
                }
            });
            
        } //End of showProperties Function

        function getSelectedData() {
            if (mainGrid.getSelectionModel().hasSelection() === true) {
                return mainGrid.getSelectionModel().getSelection()[0].data;
            }
            return;
        }//End of getSelectedData()

        function startService(serviceName) {
            Ext.getBody().mask('Starting the service ...');
            Ext.Ajax.request({
                url: '/api/start/' + serviceName,
                success: function (response) {
                    var data = Ext.util.JSON.decode(response.responseText);
                    Ext.getBody().unmask();
                    jStore.load();
                }
            });
        }//End of start service

        function stopService(serviceName) {
            Ext.getBody().mask('Stopping the service ...');
            Ext.Ajax.request({
                url: '/api/stop/' + serviceName,
                success: function (response) {
                    var data = Ext.util.JSON.decode(response.responseText);
                    Ext.getBody().unmask();
                    jStore.load();
                }
            });
        }//End of stop service

        function pauseService(serviceName) {
            Ext.getBody().mask('Pausing the service ...');
            Ext.Ajax.request({
                url: '/api/pause/' + serviceName,
                success: function (response) {
                    var data = Ext.util.JSON.decode(response.responseText);
                    Ext.getBody().unmask();
                    jStore.load();
                }
            });
        }//End of pause service

        function resumeService(serviceName) {
            Ext.getBody().mask('Resuming the service ...');
            Ext.Ajax.request({
                url: '/api/resume/' + serviceName,
                success: function (response) {
                    var data = Ext.util.JSON.decode(response.responseText);
                    Ext.getBody().unmask();
                    jStore.load();
                }
            });
        }//End of resume service

        function restartService(serviceName) {
            Ext.getBody().mask('Restarting the service ...');
            Ext.Ajax.request({
                url: '/api/stop/' + serviceName,
                success: function (response) {
                    //var data = Ext.util.JSON.decode(response.responseText);
                    Ext.Ajax.request({
                        url: '/api/start/' + serviceName,
                        success: function (response) {
                            var data = Ext.util.JSON.decode(response.responseText);
                            Ext.getBody().unmask();
                            jStore.load();
                        }
                    });
                }
            });
        }//End of restartService service

    </script>
</body>
</html>